<template>
	<div>
		<el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>报警日志</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card shadow="always">
        <div slot="header">
          <el-form ref="queryParams" :model="queryParams" label-width="85px" size="small">
            <el-row>
              <el-col :span="8">
                <el-form-item label="委试号">
                  <el-input placeholder="请输入委试号" v-model="queryParams.orderNumber" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试品名称">
                  <el-input placeholder="请输入试品名称" v-model="queryParams.productName" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试验员">
                  <el-input placeholder="请输入试验员" v-model="queryParams.userName" clearable ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="position:relative;">
              <el-col :span="8">
                <el-form-item label="报警日期">
                  <el-date-picker v-model="queryParams.timeSelect" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable :picker-options="pickerOptions" value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="8">
                <el-form-item style="float: right">
                  <el-button type="primary" size="small" style="margin-left:20px" @click="getAlarmLogList">查询</el-button>
                  <el-button class="textBtn" size="small" @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table :data="alarmLogData.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-loading="dataLoading" stripe style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="tableLabel"><el-form label-position="right" label-width="110px">
                <el-row>
                  <el-col :span="7"><el-form-item label="设备编号"><span>{{props.row.instr_number}}</span></el-form-item></el-col>
                  <el-col :span="7"><el-form-item label="加压-接地部位"><span>{{props.row.part_name}}</span></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="7"><el-form-item label="设备型号"><span>{{props.row.model}}</span></el-form-item></el-col>
                  <el-col :span="7"><el-form-item label="实际应施电压"><span>{{props.row.actually_vlot}}</span></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="7"><el-form-item label="试验部位"><span>{{props.row.press_ground}}</span></el-form-item></el-col>
                  <el-col :span="7"><el-form-item label="工位名称"><span>{{props.row.station_name}}</span></el-form-item></el-col>
                </el-row>
              </el-form></div>
            </template>
          </el-table-column>
          <el-table-column label="委试号" prop="test_number" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="异常数据" prop="test_param" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="参数值" prop="param_value" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="异常原因" prop="alarm_desc" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="试验类别" prop="test_kind" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="试品名称" prop="pk_ch_name" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="试验员" prop="nickname" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="报警日期" prop="alarm_time" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination class="pagination" background :hide-on-single-page="showPagination" :current-page.sync="currentPage" @size-change="handleSizeChange" :page-size="pagesize" layout="prev, pager, next" :total="alarmLogData.length"></el-pagination>
      </el-card>
		</div>
	</div>
</template>
<script>
import sessionStorage from '../../public/storage.js';
import dayjs from 'dayjs';
export default {
	data() {
		return {
      showPagination: true,
      queryParams: {
        userName: '', // 试验员
        productName: '', // 试品名称
        orderNumber: '', // 委试号
        timeSelect: '' // 试验日期
      },
      currentPage: 1,
      pagesize: 8,
      dataLoading: false,
      alarmLogData: [], // 报警日志表格数据
      allAlarmLogData: [], // 报警日志全部数据
      pickerOptions: {					//时间范围快捷选择
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
				}]
			},
		};
	},
	methods: {
    // 分页切换
    handleSizeChange(val) {
      this.pagesize=val;
		},
    //  设置默认时间为1个月
    setTimeDef () {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      const startTime = dayjs(start).format('YYYY-MM-DD');
      const endTime = dayjs(end).format('YYYY-MM-DD');
      this.queryParams.timeSelect = [startTime, endTime];
    },
    // 重置
    reset(){
			this.queryParams.userName = '';
			this.queryParams.productName = '';
			this.queryParams.orderNumber = '';
      this.setTimeDef()
		},
    // 获取报警日志表格数据，并将数据拷贝一份给allAlarmLogData，作为查询的数据源
    async getAlarmLogList(){
      this.dataLoading = true;
      if(this.queryParams.timeSelect === null){
        this.queryParams.timeSelect = '';
      }
      const params = {
        startTime: this.queryParams.timeSelect[0],
        endTime: this.queryParams.timeSelect[1],
        userName: this.queryParams.userName,
        productName: this.queryParams.productName,
        orderNumber: this.queryParams.orderNumber
      }
			const ret = await this.$http.get("/alarmLog/getAlarmLogList",{params});
			this.alarmLogData = ret.result;
      // this.allAlarmLogData = JSON.parse(JSON.stringify(ret.result))
			this.dataLoading = false;
    },
    // 根据委试号、试品名称、试验员、报警日期筛选条件进行筛选（暂不使用）
    queryAlarmLog(){
      this.dataLoading = true;
      this.alarmLogData = [];
      // 根据试验员、试品名称、委试号进行查找
      this.allAlarmLogData.map((item) => {
        if (item.nickname.indexOf(this.queryParams.userName) !== -1 && item.pk_ch_name.indexOf(this.queryParams.productName) !== -1 && item.test_number.indexOf(this.queryParams.orderNumber) !== -1) {
          this.alarmLogData.push(item);
        }
      });
      // 根据报警日期进行查找，element默认是00:00:00，因此结束日期的时间拼接23:59:59
      if (this.queryParams.timeSelect !== null && this.queryParams.timeSelect !== '') {
        const startTime = dayjs(this.queryParams.timeSelect[0]).valueOf();
        let endTime = dayjs(this.queryParams.timeSelect[1]).valueOf();
        let dateCat = dayjs(endTime).format('YYYY-MM-DD');
        endTime = dayjs(dateCat+=' 23:59:59').valueOf();
        this.alarmLogData = this.alarmLogData.filter((item) => {
          const date = dayjs(item.alarm_time).valueOf();
          return startTime <= date && date <= endTime
        })
      }
      this.dataLoading = false;
    },
	},
	mounted() {
    this.setTimeDef()
    this.getAlarmLogList();
	}
};
</script>
<style lang="scss" scoped>
@import "./AlarmLog.scss";
</style>